<template>
	<view class="seach-box">
		<view class="seach-box-left">
			<img src="./img/seach.png" class="seach-box-pre" />
			<input v-model="searchText" @input="onSearch" class="seach-box-input" :placeholder="title"
				placeholder-style="color: #999999;" />
		</view>
		<span class="seach-box-suf" @click="onSearch">{{searchTip}}</span>
	</view>
</template>

<script>
	export default{
		props: {
			title: {
				default:'请输入'
			},
			searchTip:{
				default:'搜索'
			}
		
		},
		data(){
			return{
				searchText:''
			}
		},
		methods:{
			onSearch(){
				this.$emit('onListen',this.searchText)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.seach-box {
		display: flex;
		justify-content: space-between;
		// padding: 37upx 45upx;
		padding: 24upx;
		height: calc(128upx - 48upx);
		background: #fff;
		align-items: center;
		// margin-bottom: 15upx;
	
		.seach-box-left {
			display: flex;
			align-items: center;
			background: #FAFAFA;
			height: 84rpx;
			width:calc(100% - 80upx) ;
			border-radius: 8rpx;
		}
	
		.seach-box-pre {
			width: 32upx;
			height: 32upx;
			margin-left: 26upx;
		}
	
		.seach-box-input {
			text-align: left;
			padding-left: 25upx;
			font-size: 28rpx;
			width: 100%;
		}
	
		.seach-box-suf {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
		}
	
		.add-suf {
			color: #D7D7D7;
		}
	}
	.seach-box:last-child {
		margin-bottom: 0;
	}
</style>
